<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
</head>
<style>
    /*<!--E:first-child	作为父元素的第一个子元素的元素E-->*/
    /*<!--E:last-child	作为父元素的最后一个子元素的元素E-->*/
    ul li:first-child{
        /*background: #FF0000;*/
    }
    ul li:last-child {
        /*background: #FF0000;*/
    }
    ul li:nth-child(1){
        /*background: #FF0000;*/
    }
    body p:nth-of-type(4){
        /*background: #FF0000;*/
    }
    /*自上而下先找类型，类型匹配之后，再去找相应位置因为如果先找位置而你所想改变的地方不一定就在你所写的数字的位置*/
    /*ul li:nth-of-type(1){*/
    /*    background: pink;*/
    /*}*/
    /*先找位置，找到后再对比类型，及运行此句代码时他先根据第几个自上而下去找到相应第几个属性
    ，之后在对比类型是否匹配匹配上则执行句中代码*/
    /*ul li:nth-child(1){*/
    /*    background: #FF0000;*/
    /*}*/
</style>
<body>
<!--选择器	功能描述-->
<!--E:first-child	作为父元素的第一个子元素的元素E    先找位置，找到后再对比类型-->
<!--E:last-child	作为父元素的最后一个子元素的元素E-->
<!--E F:nth-child(n)	选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd-->
<!--E:first-of-type	选择父元素内具有指定类型的第一个E元素-->
<!--E:last-of-type	选择父元素内具有指定类型的最后一个E元素-->
<!--E F:nth-of-type(n)	选择父元素内具有指定类型的第n个F元素-->
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<ul>
    <li>
        <p>p7</p>
    </li>
</ul>
<p>p8</p>
</body>
</html>